<template>
  <div style='margin-left: 20px;'>
    <BaseIDE
      v-if='codeContent'
      :readOnly='true'
      ideWidth='85vw'
      ideHeight='73vh'
      code-mode='text/x-java'
      :code-template='codeContent'
    />
  </div>
</template>

<script>
import BaseIDE from '@/views/reply/components/BaseIDE.vue'
import axios from 'axios'

export default {
  name: 'codePreview',
  components: { BaseIDE },
  props: {
    url: {
      required: true,
      default: '',
      type: String
    }
  },
  data() {
    return {
      codeMode: '',
      codeContent: ''
    }
  },
  created() {
    axios.get(this.url)
      .then(response => {
        this.codeContent = response.data
        this.initCodeMode()
      })
  },
  methods: {
    initCodeMode() {
      let fileExtension = this.getFileExtension(this.url)
      /**
       * text/x-csrc (C)
       * text/x-c++src (C++)
       * text/x-java (Java)
       * text/x-csharp (C#)
       * text/x-python (Python)
       * text/css (CSS)
       */
      switch (fileExtension) {
        case 'java':
          this.codeMode = 'text/x-java'
          break
        case 'c':
          this.codeMode = 'text/x-csrc'
          break
        case 'cpp':
          this.codeMode = 'text/x-c++src'
          break
        case 'cs':
          this.codeMode = 'text/x-csharp'
          break
        case 'py':
          this.codeMode = 'text/x-python'
          break
        case 'css':
          this.codeMode = 'text/css'
          break
        default:
          this.codeMode = 'text/x-python'
      }
    },
    getFileExtension(filename) {
      const lastIndex = filename.lastIndexOf('.')
      if (lastIndex === -1) {
        return ''
      }
      return filename.slice(lastIndex + 1)
    }
  }
}
</script>

<style scoped>

</style>